import React, { Component } from 'react'

import './index.css'

export default class Footer extends Component {


      // 清除已完成的
    clearTodo = ()=> {
        this.props.clearTodoDone();
    }

    handleCheckAll = (event)=>{
        // console.log(event.target.checked);
        this.props.checkAllTodo(event.target.checked)
    }
    render() {
        const { todos } = this.props ;
        // console.log(todos);
        // 计算已完成的个数
        const doneCount = todos.reduce((pre, current)=> {
            return pre+(current.done? 1: 0);
        },0);
        // 计算 总数
        const total = todos.length;
        return (
            <div className="todo-footer">
            <label>
            <input type="checkbox" onChange= {this.handleCheckAll} checked={doneCount === total&& total !== 0? true:false}/>
            </label>
            <span>
            <span>已完成 {doneCount}</span> / 全部 {total}
            </span>
            <button onClick= {this.clearTodo} className="btn btn-danger">清除已完成任务</button>
        </div>
        )
    }
}
